<!--
 * hi-button - 按钮
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <button
        class="hi-button"
        :class="_classes"
        :style="_styles"
        :hover-class="hover"
        :form-type="formType"
        :open-type="openType"
        :hover-start-time="hoverStartTime"
        :hover-stay-time="hoverStayTime"
        :app-parameter="appParameter"
        :hover-stop-propagation="hoverStopPropagation"
        :lang="lang"
        :session-from="sessionFrom"
        :send-message-title="sendMessageTitle"
        :send-message-path="sendMessagePath"
        :send-message-img="sendMessageImg"
        :show-message-card="showMessageCard"
        :group-id="groupId"
        :guild-id="guildId"
        :public-id="publicId"
        :data-im-id="dataImId"
        :data-im-type="dataImType"
        :data-goods-id="dataGoodsId"
        :data-order-id="dataOrderId"
        :data-biz-line="dataBizLine"
        @getphonenumber="_emits('getphonenumber')"
        @getuserinfo="_emits('getuserinfo')"
        @error="_emits('error')"
        @opensetting="_emits('opensetting')"
        @launchapp="_emits('launchapp')"
        @contact="_emits('contact')"
        @chooseavatar="_emits('chooseavatar')"
        @agreeprivacyauthorization="_emits('agreeprivacyauthorization')"
        @addgroupapp="_emits('addgroupapp')"
        @chooseaddress="_emits('chooseaddress')"
        @chooseinvoicetitle="_emits('chooseinvoicetitle')"
        @subscribe="_emits('subscribe')"
        @login="_emits('login')"
        @im="_emits('im')"
        @tap="handleClick"
    >
        <!-- loading 图标 -->
        <hi-icon class="hi-button__icon hi-button__icon--loading hi-button__loading" :name="loadingIcon" v-if="loading && loadingIcon"></hi-icon>

        <!-- 左侧图标 -->
        <hi-icon class="hi-button__icon hi-button__icon--left" :name="leftIcon" v-if="!loading && leftIcon"></hi-icon>

        <!-- loading 提示 -->
        <view class="hi-button__text hi-button__text--loading" v-if="loading">{{ loadingText || text }}</view>

        <!-- 按钮文本 -->
        <slot>
            <view class="hi-button__text" v-if="!loading">
                <!-- 主文本 -->
                <text class="hi-button__text__main">{{ text }}</text>

                <!-- 副文本 -->
                <text class="hi-button__text__sub" v-if="subText">{{ subText }}</text>
            </view>
        </slot>

        <!-- 右侧图标 -->
        <hi-icon class="hi-button__icon hi-button__icon--right" :name="rightIcon" v-if="!loading && rightIcon"></hi-icon>
    </button>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // props
    const _props = defineProps(props);

    // emits
    const _emits = defineEmits([
        "getphonenumber",
        "getuserinfo",
        "error",
        "opensetting",
        "launchapp",
        "contact",
        "chooseavatar",
        "agreeprivacyauthorization",
        "addgroupapp",
        "chooseaddress",
        "chooseinvoicetitle",
        "subscribe",
        "login",
        "im",
        "click"
    ]);

    // calsses
    const _classes = computed(() => {
        const classes = [];

        // 主题
        if (_props.theme) classes.push(`hi-button--theme hi-button--theme-${_props.theme}`);

        // 边框
        if (_props.border) classes.push(`hi-button--border`);

        // 镂空
        if (_props.plain) classes.push(`hi-button--plain`);

        // 浅化
        if (_props.tint) classes.push(`hi-button--tint`);

        // 是否禁用
        if (_props.disabled) classes.push(`hi-disabled hi-button--disabled`);

        // loading 的时候也要禁用
        if (_props.loading) classes.push(`hi-disabled hi-button--disabled`);

        // 圆角按钮
        if (_props.round) classes.push(`hi-button--round`);

        // 圆形按钮
        if (_props.circle) classes.push(`hi-button--circle`);

        // 带副文本
        if (_props.subText) classes.push(`hi-button--sub-text`);

        // 链接模式
        if (_props.link) classes.push(`hi-button--link`);

        // 下划线
        if (_props.underline) classes.push(`hi-button--underline`);

        // 块级按钮
        if (_props.block) classes.push(`hi-button--block`);

        return classes;
    });

    // styles
    const _styles = computed(() => {
        const styles = [];

        // 主题
        if (_props.theme) styles.push(`--hi-button-theme: var(--hi-theme-${_props.theme})`);

        // 镂空
        if (_props.plain) styles.push(`--hi-button-background: transparent;`);

        // 圆角
        if (_props.radius) styles.push(`--hi-button-border-radius: ${_props.radius};`);

        // 块
        if (_props.block) styles.push(`--hi-button-display: flex;`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-button-font-size: ${_props.fontSize};`);

        // 文字颜色
        if (_props.color) styles.push(`--hi-button-color: ${_props.color};`);

        // 背景
        if (_props.bg) styles.push(`--hi-button-background: ${_props.bg};`);

        // 边框颜色
        if (_props.borderColor) styles.push(`--hi-button-border-color: ${_props.borderColor};`);

        // 边框宽度
        if (_props.borderWidth) styles.push(`--hi-button-border-width: ${_props.borderWidth};`);

        // 边框样式
        if (_props.borderStyle) styles.push(`--hi-button-border-style: ${_props.borderStyle};`);

        // 宽
        if (_props.width) styles.push(`--hi-button-width: ${_props.width};`);

        // 高
        if (_props.height) styles.push(`--hi-button-height: ${_props.height};`);

        // 图标大小
        if (_props.iconSize) styles.push(`--hi-button-icon-font-size: ${_props.iconSize};`);

        // 图标颜色
        if (_props.iconColor) styles.push(`--hi-button-icon-color: ${_props.iconColor};`);

        // 副文本颜色
        if (_props.subColor) styles.push(`--hi-button-sub-text-color: ${_props.subColor};`);

        // 副文本大小
        if (_props.subFontSize) styles.push(`--hi-button-sub-text-font-size: ${_props.subFontSize};`);

        // 浅化背景的透明度
        if (_props.tintOpacity) styles.push(`--hi-button-background-opacity: ${_props.tintOpacity};`);

        return styles;
    });

    // 防抖定时器
    let timer;

    // 点击事件
    function handleClick() {
        // 开启了防抖
        if (_props.debounce && timer) {
            if (_props.tips) {
                uni.showToast({
                    title: _props.tips,
                    icon: "none",
                    mask: true
                });
            }
            return;
        }

        // 未开启防抖或防抖失效已过
        _emits("click");
        timer = setTimeout(() => {
            clearTimeout(timer);
            timer = null;
        }, _props.time);
    }
</script>

<style lang="scss" scoped>
    .hi-button {
        position: var(--hi-button-position, relative);
        display: var(--hi-button-display, inline-flex);
        align-items: var(--hi-button-align-items, center);
        justify-content: var(--hi-button-justify-content, center);
        font-size: var(--hi-button-font-size, inherit);
        color: var(--hi-button-color, inherit);
        border-radius: var(--hi-button-border-radius, 3px);
        background: var(--hi-button-background, var(--hi-background-default));
        margin: var(--hi-button-margin, 0);
        padding: var(--hi-button-padding, 0 16px);
        gap: var(--hi-button-gap, 3px);
        line-height: var(--hi-button-line-height, inherit);
        width: var(--hi-button-width, auto);
        height: var(--hi-button-height, 45px);

        &::after {
            display: var(--hi-button-after-display, none);
        }

        &__text {
            display: var(--hi-button-text-display, flex);
            flex-direction: var(--hi-button-text-flex-direction, column);
            justify-content: var(--hi-button-text-justify-content, center);
            text-align: var(--hi-button-text-align, center);

            &__sub {
                font-size: var(--hi-button-sub-text-font-size, 0.7em);
                color: var(--hi-button-sub-text-color, inherit);
            }
        }

        &__icon {
            font-size: var(--hi-button-icon-font-size, 1.15em);
            color: var(--hi-button-icon-color, inherit);
        }

        &__loading {
            animation: hi-animate-spin 1.5s linear 0s infinite forwards;
        }

        // 主题
        &--theme {
            background: var(--hi-button-background, var(--hi-button-theme, var(--hi-background-default)));
            color: var(--hi-button-color, #ffffff);
            border-color: var(--hi-button-border-color, var(--hi-button-theme, currentColor));
        }

        // 边框
        &--border {
            border-width: var(--hi-button-border-width, 1px);
            border-color: var(--hi-button-border-color, currentColor);
            border-style: var(--hi-button-border-style, solid);
        }

        // 镂空
        &--plain {
            background: var(--hi-button-background, transparent);
            color: var(--hi-button-color, var(--hi-button-theme, inherit));
            border-width: var(--hi-button-border-width, 1px);
            border-color: var(--hi-button-border-color, currentColor);
            border-style: var(--hi-button-border-style, solid);
        }

        // 浅化
        &--tint {
            color: var(--hi-button-color, var(--hi-button-theme, inherit));
            background: transparent;

            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                z-index: 0;
                background: var(--hi-button-background, var(--hi-button-theme, var(--hi-background-default)));
                opacity: var(--hi-button-background-opacity, 0.2);
                border-radius: inherit;
            }
        }

        // 圆角
        &--round {
            border-radius: var(--hi-button-border-radius, 1000px);
        }

        // 圆
        &--circle {
            gap: var(--hi-button-gap, 0);
            padding: var(--hi-button-padding, 0);
            border-radius: var(--hi-button-border-radius, 50%);
            width: var(--hi-button-height, 3em);
            height: var(--hi-button-height, 3em);
        }

        // 副文本
        &--sub-text {
            line-height: var(--hi-button-line-height, 1.25);
        }

        // 链接按钮
        &--link {
            padding: var(--hi-button-padding, 0);
            height: var(--hi-button-height, auto);
            width: var(--hi-button-width, auto);
            display: var(--hi-button-display, inline-flex);
            background: var(--hi-button-background, transparent);
            color: var(--hi-button-color, var(--hi-button-theme, inherit));
        }

        // 下划线
        &--underline {
            text-decoration: var(--hi-button-text-decoration, underline);
        }

        // 块级按钮
        &--block {
            display: var(--hi-button-display, flex);
            width: var(--hi-button-width, 100%);
        }
    }
</style>
